<template>
  <div class="layout flex grow">
    <Network></Network>
    <!-- 文章内容 -->
    <div class="layoutWrap flex column grow">
      <div class="flex content grow clear" id="contentsbar">
        <slot> </slot>
      </div>
    </div>

    <!-- 投顾服务 -->
    <div class="messageBox flex" v-show="showTougu">
      <transition name="solideLeft">
        <div class="tougu-bar flex column" v-show="showTougu">
          <span class="icon-close" @click="toggle"></span>
          <span class="square square1"></span>
          <span class="square square2"></span>
          <span class="square square3"></span>
          <span class="square square4"></span>
          <Advisor></Advisor>
        </div>
      </transition>
    </div>
    <div class="waves"></div>
  </div>
</template>

<script>
import Network from "./Network";
import Advisor from "./advisor";
import behavior from "@/utils/behavior";
import { getUrlParams, isOneMinu } from "@/pages/paidService/script/fn";
import * as api from "@/pages/paidService/api/api";
const userData = { ...behavior };
export default {
  components: { Network, Advisor },
  data() {
    return {
      showTougu: false,
      params: getUrlParams(),
    };
  },
  mounted() {},
  methods: {
    toggle() {
      this.showTougu = !this.showTougu;
      this.userClick();
    },
    async userClick() {
      const { token } = this.params;
      let openTime = localStorage.getItem("openTime");
      if (openTime == null) {
        localStorage.setItem("openTime", "1");
      } else {
        localStorage.setItem("openTime", ++openTime);
      }
      userData.user.token = token;
      if (this.showTougu) {
        userData.event[0].eventSubject.starttime = Date.now();
        userData.event[0].eventSubject.endtime = "";
        userData.event[0].eventCode = "00012";
        userData.event[0].eventSubject.extend.openTime = openTime;
      } else {
        userData.event[0].eventSubject.endtime = Date.now();
      }
      if (!isOneMinu()) return;
      const data = await api.userClickUpdate(userData);
    },
  },
};
</script>
<style lang="scss">
// @import "../style/var.scss";
@import "../pages/paidService/style/var.scss";

.waves {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 231px;
  right: 0;
  background: url($PIC_URL + "/tlbypcWeb/paidService/bolang.png") no-repeat
    center;
  z-index: -1;
}
.layout {
  padding: 45px 0 6%;
  margin: 0 auto;
  box-sizing: border-box;
  width: 97%;
  justify-content: center;
}
.layoutWrap {
  max-width: 1100px;
  flex-grow: 1;
  height: 100%;
  min-width: 453px;
  box-sizing: border-box;
  position: relative;
  background-size: cover;
  .content {
    height: 100%;
  }
}
.messageBox {
  position: fixed;
  height: 100%;
  left: 0;
  right: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
  z-index: 10;
  .tougu-bar {
    width: 80%;
    border-radius: 15px;
    min-width: 700px;
    max-width: 948px;
    min-height: 400px;
    height: 70%;
    max-height: 720px;
    background: #061231;
    border: 1px solid #82b4fd;
    position: relative;
    flex-grow: 1;
    .icon-close {
      position: absolute;
      right: -53px;
      top: -42px;
      width: 40px;
      height: 40px;
      display: inline-block;

      background: url($PIC_URL + "/tlbypcWeb/paidService/x.png") no-repeat
        center;
      cursor: pointer;
      z-index: 500;
    }
    .square {
      position: absolute;
      display: inline-block;
      width: 120px;
      height: 55px;
      &.square1 {
        background: url($PIC_URL + "/tlbypcWeb/paidService/leftTop.png")
          no-repeat left;
        left: -6px;
        top: -6px;
      }
      &.square2 {
        background: url($PIC_URL + "/tlbypcWeb/paidService/rightTop.png")
          no-repeat right;
        right: -6px;
        top: -6px;
      }
      &.square3 {
        background: url($PIC_URL + "/tlbypcWeb/paidService/leftBottom.png")
          no-repeat right;
        left: -6px;
        bottom: -6px;
      }
      &.square4 {
        background: url($PIC_URL + "/tlbypcWeb/paidService/rightBottom.png")
          no-repeat right;
        right: -6px;
        bottom: -6px;
      }
    }
    @include theme2;
  }
}

.tougu-icon {
  position: fixed;
  right: 5px;
  bottom: 20px;
  cursor: pointer;
  z-index: 1;
}
.solideLeft-enter-active {
  opacity: 1;
  transition: all 0.5s;
}
.solideLeft-enter {
  opacity: 0;
  transform: translateX(100%);
}
</style>
